<template>
  <view v-if="visible" class="x-time-discount" @click="handleDiscountBack">
    <view class="_content">
      <view class="_close" @click.stop="handleCloseBack">
        <x-icon name="icon-003" size="22" color="#323233"/>
      </view>
      <x-countdown
        :time="time"
        auto
        @finish="handleCloseBack"
        @change="handleCountdownChange"
      >
        <template v-if="countdownData">
          <view class="_time">{{ countdownData.minute }}:{{ countdownData.second }}后结束</view>
        </template>
      </x-countdown>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import XIcon from '@/components/x-icon';
import XCountdown from '@/components/x-countdown';

export default {
  name: 'XTimeDiscount',
  components: {
    XIcon,
    XCountdown
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    time: {
      type: Number,
      default: 600000
    }
  },
  data() {
    return {
      countdownData: null
    };
  },
  computed: {
    ...mapState({
      homeReLaunchUrl: state => state['product'].homeReLaunchUrl
    })
  },
  methods: {
    handleCloseBack() {
      this.$emit('update:visible', false);
      this.$store.dispatch('product/setData', {
        homeReLaunchUrl: null
      });
    },
    handleDiscountBack() {
      this.$emit('update:visible', false);
      this.$XTrack('homeDrawerBackClick', {
        homeReLaunchUrl: this.homeReLaunchUrl
      });
      uni.navigateTo({
        url: this.homeReLaunchUrl
      });
    },
    // 倒计时更新
    handleCountdownChange(res) {
      this.countdownData = res;
    }
  }
};
</script>

<style lang="scss">
  .x-time-discount{
    position: fixed;
    left: 40px;
    bottom: 570px;
    z-index: 123;
    ._content{
      width: 180px;
      height: 180px;
      background-image: cdn('/images/limited_time_offer.gif');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      ._close{
        position: absolute;
        top: 0;
        right: 0;
      }
      ._time{
        position: absolute;
        bottom: 20px;
        text-align: center;
        font-size: 24px;
        color: #FFFFFF;
        width: 160px;
      }
    }
  }
</style>
